<template>
  <div class="operationalData overflowY" v-loading="loading">
    <div class="PageContent">
      <div class="PageItem">
        <el-row :gutter="20">
            <el-col :span="16" class="row_left">
                <el-row :gutter="20" class="card_list">
                    <el-col :span="6">
                        <el-card shadow="hover">
                           <h2><span>当日火化量</span> <countTo class="count_to" :startVal='startVal' :endVal='cremationEndVal' :duration='3000'></countTo></h2>
                           <div id="topCremationCharts" ref='topCremationCharts'></div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover">
                            <h2><span>当日安葬量</span> <countTo class="count_to" :startVal='startVal' :endVal='buryingEndVal' :duration='3000'></countTo></h2>
                            <div id="topBuryingCharts" ref='topBuryingCharts'></div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover">
                            <h2 ><span>疑似土葬</span> <countTo class="count_to" :startVal='startVal' :endVal='buryNumber' :duration='3000'></countTo></h2>
                            <div id="topSuspectedBurialCharts" ref='topSuspectedBurialCharts'></div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover">
                            <h2 ><span>安葬/火化比率</span><countTo :startVal='startVal' :endVal='ratioEndVal' :duration='3000'></countTo>%</h2>
                            <div class="progress">
                              <el-progress :text-inside="true" :stroke-width="16" :percentage="100"></el-progress>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24" class="anzang">
                    <h3>三区九县安葬率</h3>
                    <div id="leftCenterCharts" ref="leftCenterCharts"></div>
                  </el-col>
                </el-row>
                <el-row :gutter="20" class="left_bottom">
                  <el-col :span="12">
                    <h3>死亡原因追踪</h3>
                    <div id="leftBottomLeftCharts" ref="leftBottomLeftCharts"></div>
                  </el-col>
                  <el-col :span="12">
                    <h3>%死亡性别比例</h3>
                    <div id="leftBottomRightCharts" ref="leftBottomRightCharts"></div>
                  </el-col>
                </el-row>
            </el-col>
            <el-col :span="8" class="row_right">
              <div class="right_top">
              <div class="right_top_title">
                <h2>
                  <span>临沂市公墓墓穴安葬Top</span>
                </h2>
              </div>
              <div class="right_top_content">
                <ul class="top10_list">
                  <li
                    class="top10_item"
                    v-for="(item, index) in top10List"
                    :key="index"
                  >
                    <div class="item_left">
                      <div class="tag">{{ index+1 }}</div>
                      <el-tooltip class="item" effect="dark" :content="item.cemeteryName" placement="top-start">
                        <div class="item_name">{{ item.cemeteryName }}</div>
                      </el-tooltip>
                    </div>
                    <div class="item_center">
                      <el-progress
                        status="success"
                        :text-inside="true"
                        :stroke-width="10"
                        :percentage="item.number"
                      ></el-progress>
                    </div>
                    <div class="item_right">

                      <div class="item_number">{{ item.cemeteryNumber }}/{{item.cemeteryOccupy}}</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
              <div class="right_bottom">
                <div class="right_bottom_title">
                  <h2><i class="el-icon-male"></i><span>临沂市今日公墓安葬数Top</span></h2>
                </div>
                <div class="right_bottom_content">
                  <div id="rightBottomCharts" ref="rightBottomCharts"></div>
                </div>
              </div>
            </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to';
import * as API from '@/api/civilAffairsBureau/index'
export default {
  data() {
    return {
      loading: false,//加载
      startVal: 0,//开始值
      cremationEndVal: 0,//火化量值
      buryingEndVal: 0,//安葬量值
      buryNumber:0,
      ratioEndVal: 0,//火化/安葬比例
      topCremationCharts:null,//头部火化柱状图
      topBuryingCharts:null,//头部安葬柱状图
      topSuspectedBurialCharts:null,//头部疑似土葬
      leftCenterCharts:null,//左侧众怒柱状图
      leftBottomLeftCharts:null,//左侧底部左侧图表
      leftBottomLeftChartsData:[],//死亡原因分析数据
      leftBottomRightCharts:null,//左侧底部右侧图表
      leftBottomRightChartsData:[],//死亡性别比例数据
      top10List:[],//top10
      rightBottomCharts:null,//右侧底部图表
      topBuryingChartsOption:{
        grid:{
              left:50,
              top:30,
              right:50,
              bottom:100
            },
            tooltip:{

            },
            legend: {
              show:true,
              top:0,
              right:0,
              data:[

              ]
            },
            xAxis: {
              type:'category',
              axisLabel: { //坐标轴刻度标签的相关设置。
                textStyle: {
                  color: '#333',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12,
                },
                rotate:50,
              },
              data:[],
            },
            yAxis: [
              {
                name: '死亡数',
                "axisPointer": {
                  "show": true
              },
              axisTick: {
                  show: false
              },
              axisLine: {
                  show: true,
                  lineStyle: {
                      color: '#27719F',
                  }
              },
              splitLine: {
                  show: true,

                  lineStyle: {
                      // color: '#27719F',
                      colr: '#144463'
                  }


              },
            },
            {
                name: '安葬数',
                "splitLine": {
                    "show": false
                  },
                  "axisPointer": {
                      "show": true
                  },
                  "axisTick": {
                      show: false
                  },
                              axisLine: {
                      show: true,
                      lineStyle: {
                          color: '#27719F',

                      }
                  },
            }
            ],
            series: [
              {
                name: '死亡数',
                type: 'bar',
                barWidth:20,
                 yAxisIndex: 0,
                itemStyle:{
                 normal: {
                      color: (params) => {
                          let colors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#FF3E96', '#ffe180', '#b6c2ff', '#79CDCD','#68228B', '#008B00','#8B5A2B','#EE3A8C','#A52A2A','#FFC1C1' ]
                          return colors[params.dataIndex]
                      },
                      barBorderRadius:[10,10,0,0]
                  }
                },
                data: []
            },
            {
                name: '安葬数',
                type: 'bar',
                barWidth:20,
                 yAxisIndex:1,
                itemStyle:{
                 normal: {
                      color: (params) => {
                          let colors = ['#ff0000', '#ccff33', '#cc3366', '#99ff00', '#993333', '#993399', '#330099', '#FF4040', '#FFD700', '#DAA520','#C67171', '#B22222','#8E8E38','#00F5FF','#00868B','#FF6347' ]
                          return colors[params.dataIndex]
                      },
                      barBorderRadius:[10,10,0,0]
                  }
                },
                data: []
            }
            ]
      }
    };
  },
  components: { countTo },
  created(){
    //获取临沂市公墓墓穴安葬Top
    this.getCemeteryRanking();
    //获取今日火化量安葬量
    this.getTodayCremationBuryingNumber()

  },
  mounted(){
    setTimeout(()=>{
      //初始化火化图表
      this.initTopCremationCharts();
      //初始化安葬图表
      this.initTopBuryingCharts();
      this.initTopSuspectedBurialCharts();
      //初始化左左侧中部图表
      this.initLeftCenterCharts();
      //获取三区九县安葬率
      this.getBurialRateData()
      //初始化左左侧中部图表
      this.initLeftBottomLeftCharts();
      this.getLeftBottomChartsData()
      //初始化左左侧中部图表
      this.initLeftBottomRightCharts();
      //初始化右侧底部图表
      this.initRightBottomCharts()
      //获取安葬top4
      this.getBurialsNumberRanking()
    },1000)

  },
  methods:{

    //获取今日火化量安葬量
    async getTodayCremationBuryingNumber(){
      const res = await API.findFuneralANDCmeteryBDONow();
        if(res.code==1){
          this.cremationEndVal=res.data.crematesDayNum
          this.buryingEndVal=res.data.dieDayNum
          this.buryNumber=res.data.buryNumber
          if(this.cremationEndVal==0){
            this.ratioEndVal=0
          }else{
            this.ratioEndVal=Math.round((this.buryingEndVal/this.cremationEndVal)*100)

          }

        }else{
          this.$message.error('数据读取失败');
        }
    },
    //初始化头部火化图表
    initTopCremationCharts(){
      this.topCremationCharts=this.$echarts.init(this.$refs.topCremationCharts);
      const initOption={
            grid:{
              left:0,
              top:0,
              right:0,
              bottom:0
            },
            xAxis: {
                data:["殡仪馆A","殡仪馆B","殡仪馆C","殡仪馆D","殡仪馆E","殡仪馆F","殡仪馆H","殡仪馆I","殡仪馆G","殡仪馆K","殡仪馆L","殡仪馆M","殡仪馆N"],
                axisLine:{
                  show:false
                },
            },
            yAxis: {
              axisLine:{
                show:false
              },
              splitLine:{
                show:false
              },
              axisLabel:{
                show:false
              },
              axisTick:{
                show:false
              }
            },
            series: [
              {
                name: '火化量',
                type: 'bar',
                barWidth:10,
                itemStyle:{
                  color:'#37B7FF',
                },
                data: [5, 20, 36, 10, 10, 20,10,12,5,8,16,10,7]
            }]
      }
      this.topCremationCharts.setOption(initOption)
    },
    //初始化头部安葬图表
    initTopBuryingCharts(){
      this.topBuryingCharts=this.$echarts.init(this.$refs.topBuryingCharts);
      const initOption={
            grid:{
              left:0,
              top:0,
              right:0,
              bottom:0
            },
            xAxis: {
                data:["公墓A","公墓B","公墓C","公墓D","公墓E","公墓F","公墓H","公墓I","公墓G","公墓K","公墓L","公墓M","公墓N"],
                axisLine:{
                  show:false
                },
            },
            yAxis: {
              axisLine:{
                show:false
              },
              splitLine:{
                show:false
              },
              axisLabel:{
                show:false
              },
              axisTick:{
                show:false
              }
            },
            series: [
              {
                name: '安葬率',
                type: 'bar',
                barWidth:10,
                itemStyle:{
                  color:'#FFC35C',
                },
                data: [5, 20, 36, 10, 10, 20,10,12,5,8,16,10,7]
            }]
      }
      this.topBuryingCharts.setOption(initOption)
    },
    //初始化头部疑似土葬
    initTopSuspectedBurialCharts(){
      this.topSuspectedBurialCharts=this.$echarts.init(this.$refs.topSuspectedBurialCharts);
      const initOption={
            grid:{
              left:0,
              top:0,
              right:0,
              bottom:0
            },
            xAxis: {
                data:["公墓A","公墓B","公墓C","公墓D","公墓E","公墓F","公墓H","公墓I","公墓G","公墓K","公墓L","公墓M","公墓N"],
                axisLine:{
                  show:false
                },
            },
            yAxis: {
              axisLine:{
                show:false
              },
              splitLine:{
                show:false
              },
              axisLabel:{
                show:false
              },
              axisTick:{
                show:false
              }
            },
            series: [
              {
                name: '安葬率',
                type: 'bar',
                barWidth:10,
                itemStyle:{
                  color:'#7FFFD4',
                },
                data: [5, 20, 36, 10, 10, 20,10,12,5,8,16,10,7]
            }]
      }
      this.topSuspectedBurialCharts.setOption(initOption)
    },
    //初始化左侧中部图表
    initLeftCenterCharts(){
      this.leftCenterCharts=this.$echarts.init(this.$refs.leftCenterCharts);

      this.leftCenterCharts.setOption(this.topBuryingChartsOption)
    },
    //初始化左左侧中部图表
    initLeftBottomLeftCharts(){
      this.leftBottomLeftCharts=this.$echarts.init(this.$refs.leftBottomLeftCharts);
      const initOption={
            color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
                show : true,

            },
            grid:{
              left:50,
              top:30,
              right:20,
              bottom:30
            },
            legend: {
              bottom:0,
              textStyle: {
                  color:'#8C8C8C'
              },
          },
            series : [
                {
                    name:'死亡原因追踪',
                    type:'pie',
                    radius : [30, 150],
                    roseType: 'radius',
                    data:[

                    ]
                }
            ]
      }
      this.leftBottomLeftCharts.setOption(initOption)
    },
    //获取三区九县安葬率
    async getBurialRateData(){
      this.leftCenterCharts.showLoading()
      const res = await API.findFuneralCremationBarBDO()
      if(res.code==1){
        // let dataOption={
        //   xAxis: {
        //     data:res.data.names,
        //   },
        //   series: [
        //       {
        //         type:'bar',
        //         data: res.data.cremationNumbers
        //       },
        //       {
        //         type:'bar',
        //         data: res.data.buryNumbers
        //       }
        //   ]

        // }
        this.topBuryingChartsOption.xAxis.data=res.data.names
        this.topBuryingChartsOption.series[0].data=res.data.cremationNumbers
        this.topBuryingChartsOption.series[1].data=res.data.buryNumbers
       this.leftCenterCharts.setOption(this.topBuryingChartsOption)
      }else{
         this.$message.error('数据读取失败');
      }
      this.leftCenterCharts.hideLoading()
    },
    //获取死亡原因分析
    async getLeftBottomChartsData(){
       const res = await API.findFuneralCremationCakeBDO()
      if(res.code==1){
        let arr=[]
        if(res.data.dieCauses==null){
          let obj={
            name:'暂无数据',
            value:0
          }
          arr.push(obj)
        }else {
          res.data.dieCauses.forEach(item=>{
            let obj={
              name:item.dieCauses,
              value:item.dieNumer
            }
            arr.push(obj)
          })
        }

        let arr1=[]
        if(res.data.sexDieCauses==null){
          let obj={
            name:'暂无数据',
            value:0
          }
          arr1.push(obj)
        }else {
          res.data.sexDieCauses.forEach(item=>{
            let obj={
              name:item.sexDieCauses,
              value:item.sexdieNumer
            }
            arr1.push(obj)
          })
        }
        this.leftBottomLeftChartsData=arr;
        this.leftBottomRightChartsData=arr1;
        this.updataLeftBottomCharts()
      }else{
        this.$message.error('数据读取失败');
      }
    },
    updataLeftBottomCharts(){
      let dataOption={
        series: [
          {
            data: this.leftBottomLeftChartsData
          }
        ]
      }
      let dataOption1={
        series: [
          {
            data: this.leftBottomRightChartsData
          }
        ]
      }
      this.leftBottomLeftCharts.setOption(dataOption)
      this.leftBottomRightCharts.setOption(dataOption1)
    },
    //初始化左左侧中部图表
    initLeftBottomRightCharts(){
      this.leftBottomRightCharts=this.$echarts.init(this.$refs.leftBottomRightCharts);
      const initOption={
            color: ['#1890FF','#FF2D55','#ffdb5c'],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: ['男', '女','未知','未说明']
            },
            series: [
                {
                    name: '性别比例',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [

                    ]
                }
            ]
      };
      this.leftBottomRightCharts.setOption(initOption)
    },
    //初始化右侧底部图表
    initRightBottomCharts(){
      this.rightBottomCharts=this.$echarts.init(this.$refs.rightBottomCharts);
      const initOption={
        title: {
            x: '2%',
            y: '2%',
            textStyle: {
                fontWeight: 400,
                fontSize: 16,
                color: '#687284'
            },
            text: ''
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c}"
        },
        color:['#FC6052', '#15C079', '#AFEBCF', '#5AC8FA'],
        legend: {
            orient: 'horizontal',
            bottom: 0,
            icon: 'circle',
            selectedMode: false,
            itemWidth: 6,
            itemHeight: 100,
            itemGap: 10,
            borderRadius: 6,
        },
        // calculable: true,
        series: [{
            name: '安葬Top10',
            type: 'funnel',
            minSize: 100,
            left: '20%',
            width: '60%',
            top: 0,
            gap: 2,
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    textStyle: {
                        fontSize: 15,
                    },
                    formatter: '{c}',
                },
            },
            labelLine: {
                normal: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 0
                }
            },
            data:[

            ]
        }]
      };
      this.rightBottomCharts.setOption(initOption)
    },
    //每日安葬的top排名
    async getBurialsNumberRanking(){
      const res = await API.findFuneralCmeteryBDONow();
       if(res.code==1){
         if(!res.data || !res.data.cemeteries){
           return ;
         }


         let arr=[]
         res.data.cemeteries.forEach(item=>{
           let obj={
             name:item.cemeteryName,
             value:item.cemeteryNumber
           }
          arr.push(obj)
         })

         let dataOption={
            series: [{
              data:arr
            }]
         }
          this.rightBottomCharts.setOption(dataOption)
       }else{
        this.$message.error('数据读取失败');
      }
    },
    //公墓排名临沂市公墓墓穴安葬Top
    async getCemeteryRanking(){
      const res = await API.findFuneralCmeteryBDO();
       if(res.code==1){
         this.top10List=res.data.cemeteries
       }else{
        this.$message.error('数据读取失败');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.operationalData {
    h3{
      line-height: 50px;
    }
    .PageItem{
      height: auto;
      background: none;
    }
    .PageContent{
      padding:20px;
      margin-top: 0;
    }
  // 左侧
  .row_left{
    .card_list{
      margin-bottom: 20px;
    /deep/ .el-col-6{
              //  padding-left:0!important;
              //  padding-right:0!important
            }
      .el-card{
        cursor: pointer;
        border-radius: 10px;

        h2{
          display: flex;
          align-items: center;
          line-height: 30px;
          .count_to{
            font-size: 20px;
            margin-left: 15px;
            font-weight: 600;
          }
        }
        .count_to{
          font-size: 30px;
        }
        #topBuryingCharts,#topCremationCharts,#topSuspectedBurialCharts{
          width:100%;
          height:50px;
        }
        .progress{
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          .el-progress{
            width: 100%;
            /deep/ .el-progress-bar__innerText{
              display: none;
            }
          }
        }
      }
    }
    .anzang{
      background: #fff;
      border-radius: 10px;;
    }
    .left_bottom{
      background: #fff;
      border-radius: 10px;;
      margin-top: 20px;
    }
    #leftCenterCharts{
      width: 100%;
      height: 500px;
    }
    #leftBottomLeftCharts{
      width: 100%;
      height: 400px;
    }
    #leftBottomRightCharts{
      width: 100%;
      height: 400px;
    }
  }
  //右侧
  .row_right{
    .right_top{
      margin-bottom: 30px;
      padding: 20px;
      background: #fff;
      border-radius: 10px;
      .right_top_title{
        h2{
          border-left: 4px solid #37B7FF;
          display: flex;
          align-items: center;
          text-align: center;
          color:#141414;
          font-size: 14px;
          text-indent: 10px;
          border-bottom: 1px solid #F6F6F7;
          i{
            color: #000;
            font-weight: 800;
            margin-right: 15px;
          }
        }
      }
      .right_top_content{
        min-height: 580px;
        .top10_list{
          .top10_item{
            display: flex;
            box-sizing: border-box;
            padding:0 5px;
            cursor: pointer;
            align-items: center;
            line-height: 50px;
            justify-content: space-between;
            .item_left{
              display: flex;
              align-items: center;
              
              .tag{
                width: 30px;
                height:30px;
                border-radius: 50%;
                text-align: center;
                line-height: 30px;
                background:#CAD6EF ;
                color: #fff;
                margin-right: 10px;
              }
              .item_name{
                width: 210px;
                overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              }
            }
            .item_center{
              flex:1;
              margin-left: 10px;
              /deep/ .el-progress.is-success .el-progress-bar__inner{
                background-color: #37B7FF;
              }
              /deep/ .el-progress-bar__innerText{
                display: none;
              }
            }
            .item_right{
              display: flex;
              align-items: center;
              color: #37B7FF;
              .item_number{
                width: 60px;
                text-align: center;

              }
              .el-progress{
                width: 100px;
                margin-right: 15px;
                /deep/ .el-progress-bar__innerText{
                  display: none;
                }
              }

            }
          }
          // .top10_item:nth-of-type(even){
          //   background: #EFF9FE;
          // }
          .top10_item:nth-of-type(1){
            .tag{
              background: #F87053;
            }


          }
          .top10_item:nth-of-type(2){
            .tag{
              background: #A566ED;
            }
          }
          .top10_item:nth-of-type(3){
            .tag{
              background: #FFC35C;
            }
          }
        }
      }
    }
    .right_bottom{
      padding: 20px;
      background: #fff;
      border-radius: 10px;
      .right_bottom_title{
        h2{
          display: flex;
          align-items: center;
          text-align: center;
          color:#000;
          font-size: 14px;
          font-weight: 600;
          line-height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #F6F6F7;
          i{
            color: #000;
            font-weight: 800;
            margin-right: 15px;
          }
        }
      }
      .right_bottom_content{
        width: 100%;
        #rightBottomCharts{
          width: 100%;
          height: 500px;
        }
      }
    }
  }

}

</style>
